.clearfix::after{
    content:'';
    clear: both;
    display: block；
}

*{
    margin: 0px;
    padding: 0px;
}
a{
    color:inherit;
    text-decoration: none;
}

.topNavBar{
    position:fixed;
    height:60px;
    margin: 10px 0px;
    width: 100%;
}

.topNavBar .logo{
    float: left;
    font-family: "Arial black";
    font-size: 24px;
    padding: 12px 0px 12px 0px;
}
.topNavBar nav{
    float: right;
      
}

.topNavBar .logo .rs{
    color:#e6686a;
    margin-right:4px; 
    
}
.topNavBar .logo .card{
    color:#9a9da2; 
}

.topNavBar nav ul{  
    list-style: none;
    margin: 0px; 
    padding: 0px; 
}

.topNavBar nav li{
    float:left; 
    margin: 0px 17px;
    padding: 17px 0px;
}

.topNavBar nav li a{
    font-size: 12px;
    font-weight: bold;
    color: #b7b7b7;
    padding-bottom: 5px;
    padding-top: 5px;
}

.topNavBar nav li a:hover{
    border-bottom: 3px #e6686a solid;
}

.barlinner{
    padding:0px 16px;
}
/*以上导航栏css*/

.banner{
    background-image: url(./img/bgimg.jpg);
    height: 620px ;
    background-position: center;
    background-size: cover;
    
}

.banner .mask{
    height: 620px ;
    background-color:rgba(0, 0, 0,0.7);
}

.usercard{
    
    max-width: 940px;
    margin-left: auto;
    margin-right: auto;
    background-color:white;
    margin-top:-300px;
    box-shadow: 0px 3px 14px 0px rgba(110,100,110,1);

  
}

.usercard .picandtext{
    padding:50px;
    
}
.usercard .pic{
    float:left;
    width: 300px;
    height: 346px;
    margin-right: 65px;
    background-image: url(./img/avatar.jpg);
}

.usercard .pic:hover{
    background-image: url(./img/avatar-hover.jpg);
}

.welcome{
   
    float:left;
}


.usercard .hello{
    background-color: rgb(232, 103, 107);
    font-size: 18px;
    padding: 6px 10px;
    font-weight: bold;
    color: white;
    position: relative;
    display: inline-block;
    
    
}
.angel{
    border:10px solid transparent;
    width:0px;
    height:0px;
    border-left-color: rgb(232, 103, 107);
    border-top-width:0px;  
    position: absolute;
    margin-left: 10px;
     
  }

  .usercard .self h1{
    margin-bottom: 0px;
    margin-top: 50px;
    font-family: "arial black";
    font-size:48px;
    color: rgb(61, 68, 81);
}

.usercard .self h1 span{
    font-family: "sans-serif";
    margin-right: 15px;
    font-size: 60px;
}

.usercard p{
    margin-top: 0px;
    margin-bottom: 25px;
    font-size: 20px;
}


hr{
    border: 1px solid #a09f9f;
    margin-bottom:15px; 

}

.usercard  dl dt,
.usercard  dl dd{
    float:left;
    padding: 8px 0px;
}
.usercard  dl dt{ 
    width: 150px;
    font-weight: bold;
}
.usercard  dl dd{
    width:200px;
    color:gray;
}

.usercard .media{
    
    width: 100%;
    background-color: rgb(232, 103, 107);
    margin-top: 150px;
}

.media .icon{
    width: 25px;
    height: 25px;
    vertical-align: top;
    padding: 10px;
    
}

.media {
    text-align: center;
    
}



.media a{
    border: 1px solid rgb(232, 103, 107);
    border-radius:50%;
    display: inline-block;
    margin:20px 20px; 
}

.media a:hover{
    background-color:rgba(0, 0, 0,0.1);
    
}
/*******************个人卡片******************************/
ul,ol{
    list-style: none;
}
/*******************下载键****************************/
.buttom{
    border-radius: 11px;
    padding: 21px 55px;
    border: 1px solid rgb(203, 205, 207); 
    background-color: rgb(241, 239, 239);
   
   
}

.buttom:hover{
    box-shadow: 0px 4px 13px 3px rgba(143,141,143,1);
    transition: box-shadow 0.5s;
}
.download{
    
    text-align: center;/****因为a为内联元素，auto,margin-top&bottom无效******/
    margin: 50px 55px;
    
}

 .text{
  text-align: center;
  max-width: 940px;
    margin-left: auto;
    margin-right: auto;  
    font-size: 18px;
    line-height: 30px;
    
}

section {
    max-width: 940px;
    margin-left: auto;
    margin-right: auto; 
}

section h2{
text-align: center;
font-size: 40px;
color:rgb(75, 81, 93);
}

.skills {
    margin-top: 60px;
}

.skills ol{
    box-shadow: 0px 4px 13px 3px rgba(143,141,143,1);
    background-color: #fff;
    height: 250px;
    margin-top: 40px;
}

.skills ol li{
    float: left;
    width: 40%;
    padding: 30px 0px 10px 40px;
    display: block;
    margin-left: 35px;
    
}



.skillprogress{
    height:4px;
    border:1px solid rgb(245, 169, 169);
    width: 90%;
    background-color: rgb(245, 169, 169);
    margin:4px 0px;

}

.progress1{
    height:3px;
    border:1px solid rgb(223, 114, 114);
    width: 80%;
    background-color: rgb(223, 114, 114);
}

.progress2{
    height:3px;
    border:1px solid rgb(223, 114, 114);
    width: 60%;
    background-color: rgb(223, 114, 114);
}

.progress3{
    height:3px;
    border:1px solid rgb(223, 114, 114);
    width: 90%;
    background-color: rgb(223, 114, 114);
}

.progress4{
    height:3px;
    border:1px solid rgb(223, 114, 114);
    width: 95%;
    background-color: rgb(223, 114, 114);
}

.progress5{
    height:3px;
    border:1px solid rgb(223, 114, 114);
    width: 60%;
    background-color: rgb(223, 114, 114);
}
.progress6{
    height:3px;
    border:1px solid rgb(223, 114, 114);
    width: 100%;
    background-color: rgb(223, 114, 114);
}